<template>
  <div class="v2-sidebar"  >
    <div class="aside-title" :data-refresh="learnCtSidebarRefresh">{{book.bookName}}</div>
    <el-menu
        background-color="#001525"
        unique-opened
        style="border-right: none"
        class="el-menu-vertical"
        text-color="#fff"
        :collapse="isCollapse"
        :default-active="bookActiveId"
        active-text-color="#ffd04b">
      <sidebar-item :menu="menu" :collapse="isCollapse"></sidebar-item>
    </el-menu>

  </div>
</template>

<script>
import SidebarItem from "./sidebarItem";
import contentex from "@/api/learn/contentex"
import ApiResponse from "utils/ApiResponse";
import {mapGetters} from "vuex";
export default {
  name: "sidebar",
  components:{
    SidebarItem
  },
  data(){
    return {
      menu:[],
      width: '220px' ,
      sidebarCls:{
        'w-60px': !this.isCollapse ,
        'w-220px': this.isCollapse
      },
      data(){
        return [
          {
            id: 1 ,
            bookId: 2,
            name: '' ,
            parentId: 0 ,
            owner: 123 ,
            type: 0 ,
            sort: 1 ,
            createTime: '' ,
            children: []
          }
        ]
      }
    }
  },
  mounted() {
    this.getMenu();
  },
  methods:{
    getMenu(){
      contentex.getList({
        bookId: this.book.id
      }).then(res=>{
       let response =  new ApiResponse(res) ;
        response.ok((data)=>{
          this.menu = data ;
        })
      })
    }
  },
  computed:{
    ...mapGetters(['isCollapse']) ,
    learnCtSidebarRefresh(){
      this.getMenu()
      return this.$store.state.learn.learnCtSidebarRefresh
    },
    ...mapGetters(['book',"bookActiveId"]),
    scrollbarClass(){
      return {
        'w-200px': !this.isCollapse ,
        'w-60px': this.isCollapse ,
        's-height': true
      }
    }
  },
  watch:{
  }
}
</script>

<style scoped>
@import url("~@/assets/css/v2-sidebar.css");


</style>
